<template>
  <div class="app-container">
    <el-dialog :model-value="itemsVisible" title="选择一级项目" :append-to-body="true" width="80%" height="1000px" @close="closeBtn">
      <div class="filter-container">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item prop="catalogId" label="项目分类">
            <el-select v-model="listQuery.catalogId" class="m-2" placeholder="请选择">
              <el-option key="" label="全部" value="" />
              <el-option v-for="item in catalogList" :key="item.id" :label="`${item.catalogCode} - ${item.catalogName}`" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="code" label="一级项目编号">
            <el-input v-model="listQuery.code" placeholder="一级项目编号" />
          </el-form-item>
          <el-form-item prop="name" label="一级项目名称">
            <el-input v-model="listQuery.name" placeholder="一级项目名称" />
          </el-form-item>
          <el-form-item>
            <el-button v-waves type="success" icon="Search" @click="handleFilter">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container">
        <el-table v-loading="listLoading"
                  :data="projectOneList"
                  border
                  fit
                  highlight-current-row
                  tooltip-effect="dark"
                  style="width: 100%;margin-bottom: 20px;"
                  :max-height="695 +'px'">
          <el-table-column align="center" type="index" label="序号" width="60px" />
          <el-table-column align="center" label="一级项目编码" prop="code" min-width="155px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.code }}</template>
          </el-table-column>
          <el-table-column align="center" label="一级项目名称" prop="name" min-width="155px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.name }}</template>
          </el-table-column>
          <el-table-column align="center" label="一级项目编号" prop="code" min-width="155px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.code }}</template>
          </el-table-column>
          <el-table-column align="center" label="计划开始年度" prop="planStart" min-width="155px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.planStart }}</template>
          </el-table-column>
          <el-table-column align="center" label="计划截止年度" prop="planEnd" min-width="155px" sortable show-overflow-tooltip>
            <template v-slot="{row}">{{ row.planEnd }}</template>
          </el-table-column>
          <el-table-column align="center" label="最后修改时间" width="100px" prop="updateTime" />
          <el-table-column label="选择一级项目" width="150" align="center">
            <template v-slot="{row}">
              <el-radio :label="row.id" v-model="tableRadio" border @change="handleCurrentChange($event, row)">选择</el-radio>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" class="pagination-model" />
        <div style="text-align:right;margin: 1.875rem 0;">
          <el-button type="danger" @click="closeBtn">关闭</el-button>
          <el-button type="primary" @click="oSrueBtn">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {alertErrorMsg, getListPageSize, svc} from "@/config/common";
import initListStore from '@/store/modules/initList'

const props = defineProps({
  itemsVisible: {
    required: true,
    type: Boolean,
  },
  type: {
    required: false,
    type: String,
  }
})

let search = ref('')
let tableRadio = ref('')
let projectOneList = ref([])
let listLoading = ref(true)
let total = ref(0)
let radioRow = null
let listQuery = ref({
  pageNum: 1,
  pageSize: 10,
  sortField: 'id',
  sortType: 'desc',
  catalogId: null,
  departmentId: null,
  code: null,
  name: null,
  principalUserId: null,
  amount: null,
  currentAmount: null,
  state: null,
  planStart: null,
  planEnd: null,
  attachmentId: null,
  createTimeStart: null,
  createTimeEnd: null,
  updateTimeStart: null,
  updateTimeEnd: null,
})

const emit = defineEmits(['close', 'projectOneSelect'])

const catalogList = initListStore().catalogList

watch(() => props.itemsVisible, async val => {
  if (val === true) {
    await getList()
    // await initList()
  }
})

// 获取数据
async function getList() {
  listLoading.value = true
  let res = await doGet(svc, '/budget-project-one/page', listQuery.value)
  listLoading.value = false
  total.value = parseInt(res['total'])
  projectOneList = res['records']
}

// async function initList() {
//   let p1 = doGet(svc, '/budget-catalog/page', {state:'1',pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1])
//   catalogList.value = resArray[0]['records']
// }

// 查询
async function handleFilter() {
  listQuery.value['pageNum'] = 1
  await getList()
}

// 关闭弹层
function closeBtn() {
  emit('close')
}

// 选择二级项目
function handleCurrentChange(val, row) {
  radioRow = row
}

// 选择二级点确定
function oSrueBtn() {
  if (!radioRow) {
    alertErrorMsg('请选择一级项目')
    return
  }
  emit('projectOneSelect', radioRow)
  emit('close')
}
</script>
<style>
.pagination-model {
  right: 36px !important;
}
</style>
